//页面加载完后触发  window
window.onload = function(){
	var oLis = document.getElementsByClassName('box_ann')[0].getElementsByTagName('span');
	var oImgs = document.getElementsByClassName('box-ul')[0].getElementsByTagName("li");
	var index = 0;//标记页码
	var timer = null;
	
	for(let i = 0; i < oLis.length; i++){
		oLis[i].onclick = function(){
			clearAll();
			this.id = "active";
			oImgs[i].style.display = "block";
			index = i;
		}
	}
	function clearAll(){
		//清除active
		for(var i = 0; i < oLis.length; i++){
			oLis[i].id = "";
		}
		for(var i = 0; i < oImgs.length; i++){
			oImgs[i].style.display = "none";
		}
	}
	
	document.getElementById("box_left").onclick = function(){
		index --;
		if(index < 0){
			index = oLis.length -1;
		}
		clearAll();
		oImgs[index].style.display = "block";
		oLis[index].id = "active";
	}
	document.getElementById("box_right").onclick = next;
	
	function next(){
		index++;
		if(index >= oLis.length){
			index = 0;
		}
		clearAll();
		oImgs[index].style.display = "block";
		oLis[index].id = "active";
	}
	setTimer();
	function setTimer(){
		timer = setInterval(next,4000);
	}
	
	document.getElementsByClassName("container")[0].onmousemove = function(){
		if(timer){
			clearInterval(timer);
		}
	}
	document.getElementsByClassName("container")[0].onmouseout = setTimer;
	
}